<template>
  <div>
    <title-line title="基本设置" />
    <el-form ref="elForm" :model="formData" :rules="rules" label-width="110px">
      <el-row>
        <el-col :lg="14" :xl="10">
          <el-form-item label="活动开关：" prop="isOpen" required>
            <el-radio-group v-model="formData.isOpen">
              <el-radio v-for="(item, index) in TURN_ON_STATUS" :key="index" :label="item.value">{{
                item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <div style="position: relative">
            <el-form-item label="每日限兑：" required>
              <div class="flex items-center" style="height: 32px">
                <el-radio v-model="limit" :label="0">不限制</el-radio>
                <div class="flex items-center">
                  <el-radio v-model="limit" :label="1">同一用户每日限兑</el-radio>
                  <div class="flex" v-show="limit > 0">
                    <span>限制</span>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item
              v-if="limit > 0"
              prop="exchangeTimes"
              style="position: absolute; top: 0; right: 0"
            >
              <el-input
                v-model.number="formData.exchangeTimes"
                style="width: 140px"
                class="ml-10 mr-10"
                placeholder="请输入兑换次数"
              />
              <span>次</span>
            </el-form-item>
          </div>

          <el-form-item label="活动说明：" prop="content">
            <el-input
              v-model="formData.content"
              type="textarea"
              :autosize="{ minRows: 8, maxRows: 10 }"
              placeholder="请输入活动说明300字以内"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm"> 取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { TURN_ON_STATUS } from '@/enum'
export default {
  name: 'ActivitySet',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        isOpen: false,
        exchangeTimes: 1,
        content: ''
      },
      limit: 0,
      rules: {
        exchangeTimes: [
          {
            required: true,
            message: '请输入限制次数',
            trigger: 'blur'
          },
          {
            pattern: /^[1-9]\d$|^[1-9]$/,
            message: '请输入1-99之间的正整数'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入活动说明',
            trigger: 'blur'
          },
          {
            max: 300,
            message: '限制输入300个字以内',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    TURN_ON_STATUS() {
      return TURN_ON_STATUS
    }
  },
  created() {
    this.getActivityConfig()
  },
  methods: {
    // 获取配置
    async getActivityConfig() {
      const { data } = await this.$http.coupon.setApi.getActivityConfig({ type: 20 })
      for (const key in data) {
        this.formData[key] = data[key]
      }
      this.limit = this.formData.exchangeTimes > 0 ? 1 : 0
    },
    // 确定
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        const params = {
          type: 20,
          ...this.formData
        }
        if (this.limit === 0) params.exchangeTimes = 0
        const { status, msg } = await this.$http.coupon.setApi.updatedActivityConfig(params)
        if (status === 200) {
          this.$message.success('保存成功！')
          this.getActivityConfig()
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
